<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会员管理系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    /* 导航栏 */
    header {
      background-color: #f8f9fa;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
    }

    .nav-links a {
      margin-right: 20px;
      color: #333;
      text-decoration: none;
    }

    .nav-links button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
    }

    .nav-links button:hover {
      background-color: #0056b3;
    }

    /* 轮播图 */
    .carousel {
      width: 100%;
      height: 300px;
      overflow: hidden;
      position: relative;
    }

    .carousel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .carousel img.active {
      display: block;
    }

    /* 推荐商品 */
    .recommend-goods {
      padding: 20px;
    }

    .recommend-goods h2 {
      margin-bottom: 15px;
    }

    .goods-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .goods-item {
      width: calc(25% - 15px);
      background-color: white;
      padding: 15px;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .goods-item img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      margin-bottom: 10px;
    }

    .goods-item h3 {
      margin-bottom: 5px;
    }

    .goods-item .price {
      color: #ff4d4f;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .goods-item button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background-color: #ff4d4f;
      color: white;
      cursor: pointer;
    }

    .goods-item button:hover {
      background-color: #e53935;
    }

    /* 页脚 */
    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 15px;
    }
  </style>
</head>

<body>
  <header>
    <a href="#" class="logo">会员购物平台</a>
    <div class="nav-links">
      <a href="#">首页</a>
      <a href="#">商品分类</a>
      <a href="#">购物车</a>
      <a href="#">会员中心</a>
      <input type="text" placeholder="搜索商品">
     
        
      <a href="login.html">登录</a>
      <a href="register.html">注册</a>

   
    </div>
  </header>

  <div class="carousel">
    <img src="images/OIP-C.jpg" alt="轮播图1" class="active">
    <img src="images/OIP-C (2).jpg" alt="轮播图2">
    <img src="images/ICCC.png" alt="轮播图3">
    
      <!-- 新增你的图片（注意src路径） -->
      <img src="images/examp.jpg" alt="cat" > <!-- 这里添加你的图片 -->
    </div>
  </div>

  <div class="recommend-goods">
    <h2>推荐商品</h2>
    <div class="goods-list">
      <div class="goods-item">
        <img src="https://via.placeholder.com/400x200?text=商品1" alt="商品1">
        <h3>手机</h3>
        <div class="price">3999元</div>
        <div>100积分</div>
        <button onclick="addToCart(1)">加入购物车</button>
        <button onclick="buyNow(1)">立即购买</button>
      </div>
      <div class="goods-item">
        <img src="https://via.placeholder.com/400x200?text=商品2" alt="商品2">
        <h3>笔记本电脑</h3>
        <div class="price">5999元</div>
        <div>200积分</div>
        <button onclick="addToCart(2)">加入购物车</button>
        <button onclick="buyNow(2)">立即购买</button>
      </div>
      <div class="goods-item">
        <img src="https://via.placeholder.com/400x200?text=商品3" alt="商品3">
        <h3>耳机</h3>
        <div class="price">999元</div>
        <div>50积分</div>
        <button onclick="addToCart(3)">加入购物车</button>
        <button onclick="buyNow(3)">立即购买</button>
      </div>
      <div class="goods-item">
        <img src="https://via.placeholder.com/400x200?text=商品4" alt="商品4">
        <h3>平板</h3>
        <div class="price">2999元</div>
        <div>150积分</div>
        <button onclick="addToCart(4)">加入购物车</button>
        <button onclick="buyNow(4)">立即购买</button>
      </div>
    </div>
  </div>

  <footer>
    &copy; 2025 会员购物平台. 版权所有 | <a href="#">联系我们</a> | <a href="#">帮助中心</a> | <a href="#">隐私政策</a>
  </footer>

  <script>
    // 模拟轮播图切换
    const carouselImages = document.querySelectorAll('.carousel img');
    let currentIndex = 0;
    setInterval(() => {
      carouselImages[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % carouselImages.length;
      carouselImages[currentIndex].classList.add('active');
    }, 3000);

    // 模拟加入购物车功能
    function addToCart(goodsId) {
      console.log(`将商品 ${goodsId} 加入购物车`);
    }

    // 模拟立即购买功能
    function buyNow(goodsId) {
      console.log(`立即购买商品 ${goodsId}`);
    }
  </script>
</body>



</html>